<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动造成的影响2</title>
	<style type="text/css">
	*{
		margin:0;
		padding:0;
		/*height:200px;*/
		overflow:hidden;
	}
	#box{
		border:5px solid;
	}
	#div1{
		width: 200px;
		height: 200px;
		background-color: red;
		float:left;
	}
	#div2{
		width: 200px;
		height: 200px;
		background-color: yellow;
		float:left;
	}	
	/*#div3{
		clear:both;
	}*/

	</style>
</head>
<body>

	<div id="box">
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
	<!-- 当父级没有设置高度时,其高度默认由内容撑出,此时如果父级里的元素在发生浮动时,父级会发生"内容塌陷"-->
	<!-- 解决办法
	1.给父级加高度.
	2.在浮动元素的最后添加一个空标签,并设置clear:both;
	3.给父级添加overflow:hidden样式.-->
</div>
</body>
</html>